<template>
    <div class="about">
        <Card>
            <Table border stripe ref="selection" :columns="columns" :data="tableData">
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="relateMenu(row)">关联菜单</Button>
                </template>
            </Table>

            <Modal
                    v-model="isOpen"
                    title="关联菜单"
                    @on-ok="updateRoleMenu"
            >
                <MenuTree ref="tree" :data="menu.data"></MenuTree>
            </Modal>
        </Card>
    </div>
</template>

<script>
    import MenuTree from '_c/tree-table/tree'
    import {getMenus, getRoles, relateRoleMenu} from '@/api'

    export default {
        name: 'roles',
        components: {
            MenuTree
        },
        data() {
            return {
                isOpen: false,
                columns: [
                    {title: 'id', key: 'id',},
                    {title: '角色名称', key: 'name'},
                    {title: '角色备注', key: 'remark'},
                    {
                        title: '操作',
                        slot: "action"
                    },

                ],
                tableData: [],
                menu: {
                    data: [],
                    columns: [
                        {
                            title: 'id',
                            key: 'menuId',
                        },
                        {
                            title: '菜单名称',
                            key: 'menuName',
                        },
                        {
                            title: '菜单URL',
                            key: 'url',
                        },
                        {
                            title: '菜单类型',
                            key: 'menuType',
                        },
                    ]
                },
                roleId: null
            }
        },
        methods: {
            relateMenu(row = {}) {
                this.isOpen = !this.isOpen
                this.getMenus(row)
            },
            getData() {
                getRoles().then((res) => {
                    this.tableData = res.data.list
                })
            },
            getMenus(row) {
                let menuIds = row.menuIds || []
                this.roleId = row.id
                getMenus().then(res => {
                    let convert = (array) => {
                        return array ? array.map(it => {
                            let checked = false;
                            if (it.menuType !== '目录') {
                                checked = true;
                            }
                            return {
                                id: it.menuId,
                                checked: checked && menuIds.indexOf(it.menuId) > -1,
                                title: it.menuName,
                                children: convert(it.children)
                            }
                        }) : null;
                    }
                    this.menu.data = convert(res.data.menus)

                })
            },
            updateRoleMenu() {
                let menuIds = this.$refs.tree.getSelect().map(it => {
                    return it.id
                })
                relateRoleMenu(menuIds, this.roleId).then((res) => {
                    if (res && res.meta && res.meta.isSuccess) {
                        this.getData()
                        this.$Message.success("修改成功")
                    } else {
                        this.$Message.error("修改失败")
                    }
                })
                this.roleId = null
            }
        },
        mounted() {
            this.getData()
        }
    }
</script>

<style lang="scss">


</style>
